<template>
	<view>
		<u-sticky>
			<div class="nav">
				<uni-nav-bar title="折扣套票区" left-icon="back" @clickLeft="$tab.back()" :fixed="true" :statusBar="true"
					:border="false" backgroundColor="transparent" color="#FFF"></uni-nav-bar>
				<div class="search flex items-center justify-around">
					<div class="flex items-center">
						<u-icon name="search" color="#999999"></u-icon>
						<div class="ml-16" style="color: #999999;">
							根据商品名称、品牌等进行模糊搜索
						</div>
					</div>
				</div>
			</div>
		</u-sticky>

		<div class="p-20">
			<div class="py-32 px-20 flex bg-white mb-16" v-for="(item,index) in list" :key="item.id">
				<image :src="globalConfig.imagePrefix + item.iconUrl" mode="" class="image-64 round"></image>
				<div class="ml-12 mt-12">
					<div class="text-32">
						{{item.name}}
					</div>

					<div class="mt-24 li flex items-center justify-between px-28" v-for="(i,j) in item.children" :key="i.id"
						:style="{
							background: `url(https://file.fulewanjia.com/fulewanjia/profile/appImages3/index/${(j % 4) + 1}@3x.png) no-repeat`,
							backgroundSize: '100% 100%',
						}">
						<div class="text-36 font-500 text-FFF">
							{{i.price}} <span class="text-20 ml-12">元</span>
						</div>

						<div class="flex items-center justify-between" style="width: 406rpx;">
							<div class="text-FFF">
								<div class="">{{i.name}}</div>
							</div>
							<div class="shiyong text-FFF font-500" @click="goShopDetal(i)">
								购买
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list: [],
				globalConfig: getApp().globalData.config
			};
		},
		onLoad() {
			this.getData();
		},
		methods: {
			goShopDetal(item) {
				this.$tab.nav(`/pages/commodity/detail?id=${item.id}`)
			},
			async getData() {
				const type = await this.$Api.common.typeChildrenAll({
					code: "zhekoutaopiaoqu"
				})
				const promises = type.data.map(async (item) => {
					const params = {
						pageNum: 1,
						pageSize: 9999,
						zhekoutaopiaoType: item.id,
						/* 根据item构造params */
					};
					const result = await this.$Api.index.getProductsList(params);
					return {
						...item,
						children: result.rows
					};
				});

				this.list = await Promise.all(promises);
				console.log(this.list)
			},
			refresh() {
				this.$nextTick(() => {
					this.$refs.pullScroll.refresh();
				});
			},
			pullDown(pullScroll) {
				setTimeout(() => {
					this.loadData(pullScroll);
				}, 200);
			},
			loadData(pullScroll) {
				setTimeout(async () => {
					if (pullScroll.page == 1) {
						this.list = [];
					}
					const res = await this.$Api.index.discountList({
						pageNum: pullScroll.page,
						pageSize: 10
					});

					this.list = this.list.concat(res.rows);

					if (this.list.length >= res.total) {
						pullScroll.finish();
					} else {
						pullScroll.success();
					}
				}, 500);
			}
		}
	}
</script>

<style lang="scss">
	/deep/ .u-sticky {
		top: 0 !important;
	}

	.nav {
		height: 280rpx;
		background: url(https://file.fulewanjia.com/fulewanjia/profile/appImages3/index/discount_nav@2x.png) no-repeat;
		background-size: 100% 100%;
	}

	.search {
		width: 710rpx;
		height: 80rpx;
		background: #FFFFFF;
		border-radius: 8rpx 8rpx 8rpx 8rpx;
		margin: 24rpx auto 0;
	}

	.li {
		width: 594rpx;
		height: 128rpx;
	}

	.shiyong {
		width: 122rpx;
		height: 56rpx;
		background: #FF323B;
		border-radius: 28rpx;
		line-height: 56rpx;
		text-align: center;
	}
</style>